import ArticleList from '@/pages/Home/component/ArticleList'
import { RootState } from '@/store'
import { useSelector } from 'react-redux'
import ArticleMark from './component/ArticleMark'
import Channel from './component/Channel'
import styles from './index.module.scss'

export default function Home() {
  const { list, activeId } = useSelector((state: RootState) => state.channel)
  return (
    <div className={styles.root}>
      <Channel />
      {/* 首页新闻列表组件 */}
      {list.map((item) => (
        <div
          key={item.id}
          className="channel-list"
          hidden={activeId !== item.id}
        >
          <ArticleList channel_id={item.id} />
        </div>
      ))}
      {/* 标记文章的组件 - 不感兴趣 举报 */}
      <ArticleMark />
    </div>
  )
}
